<template>
    <div>
     <Header>
            <template v-slot:title>
                仿真模考
            </template>
             <template v-slot:right>
                <van-icon name="search"  @click="$router.push('/Practivesearch')"/>
            </template>
        </Header>
       <van-dropdown-menu>
            <van-dropdown-item title="考试类型" ref="item">
  <div style="padding:1rem;">
      <ul>
        <li style="height:1rem;" v-for="item in arr" :key="item.id">{{item.text}}</li>
      </ul>
  </div>
  </van-dropdown-item>
  <van-dropdown-item v-model="value" :options="option" @click.native="Pai(value)"/>
  <van-dropdown-item title="筛选" ref="item">
    <div style="padding: 5px 16px;">
      <van-button  v-for="item in list1" :key="item.id" style="margin-right:.5rem;width:3rem;margin:.3rem;" plain type="info" @click="Sai(item.id),onConfirm" >{{item.name}}</van-button>
    </div>
  </van-dropdown-item>
</van-dropdown-menu>
<!-- 列表 -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <dl>
            <dd v-for="ite in list" :key="ite.id"  @click="$router.push('/courceDetail?id='+ite.id)">
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                <p style="fontSize:0.3rem;color: #000;margin:0.15rem 0rem">
                    <van-icon name="clock-o" />
                    <span>{{new Date(ite.end_play_date).toLocaleString()}}</span>
                    共{{ite.sales_num}}课时</p>
                    <div>
                  <img :src="ite.teachers_list[0].teacher_avatar" alt="">
              <p>{{ite.teachers_list[0].teacher_name}}</p>   
                </div>     
               <p class="ite-bot"> 
                  <span style="fontSize:0.3rem;color: #777;">{{ite.brows_num}}人已报名</span> 
                   <span style="fontSize:0.45rem;color:#44a426;" v-if="ite.price">
                       {{ite.price}}</span> 
                       <span style="fontSize:0.45rem;color:#44a426;">
                       免费</span>
               </p>
            </dd>
        </dl>
  
  </van-list>
</van-pull-refresh>
    
    

    </div>
</template>

<script>
import Header from '../Bar.vue'
import { courseTop, courseLists} from "../../Request/http";
export default {
    components:{Header},
    name: 'EverydayExam',

  data() {
    return {
      list: [],
      list1: [],
      value: 0,
      option: [
        { text: "排序", value: 0 },
        { text: "最新", value: 1 },
        { text: "最热", value: 2 },
        { text: "价格从低到高", value: 3 },
        { text: "价格从高到低", value: 4 }
      ],
      arr: [
        { text: "全部", value: 0 },
        { text: "模拟考试", value: 1 },
        { text: "正式考试", value: 2 }
      ],
      loading: false,
      finished: false, //没有更多
      refreshing: false,
      last_page: 1,
      current_page: 1,
      param: {
        limit: 5,
        page: 1
      },
      total: "",
      order_by:'',
      course_type:''
    };
  },
  mounted() {
    courseLists(this.param).then(res => {
        this.list = res.list;
        this.total = res.total;
        this.loading = false;
      });
    this.apply();
    // this.onLoad()
  },

  methods: {
   onConfirm(){
     this.$refs.item.toggle();
   },
    Pai(id) {
this.order_by=id
      courseLists({course_type:this.course_type,order_by:this.order_by+1}).then(res=>{
        // console.log(res);
        this.list=res.list
      })
    },
    Sai(id){
      this.course_type=id
      courseLists({course_type:this.course_type,order_by:this.order_by+1}).then(res=>{
        // console.log(res);
        this.list=res.list
      })
    },
    apply() {
      courseTop().then(res1 => {
        this.list1 = res1.appCourseType;
      });
    },
    // 上拉加载
    onLoad() {
      courseLists({ limit: this.param.limit, page: ++this.param.page }).then(
        res1 => {
          this.loading = false;
          this.total=res1.total;
          console.log(this.total);
          const { current_page, list, last_page } = res1;
          console.log(current_page, list.length, last_page);
          if (list.length ==0 && this.param.page != 1) {
           console.log('123456');
           this.finished = true;
            this.loading = false;
              return
          }
          this.list = [...this.list, ...res1.list];
          // this.list = this.list.concat(res1.list)
          // this.current_page=current_page
          // this.last_page=last_page
          this.finished = false;
        }
      );
    },
    // 下拉刷新
    onRefresh() {
      this.param.page = 1;
      this.param.limit = 5;
      this.refreshing = true;
      courseLists(this.param).then(res1 => {
        // console.log(res1);
        this.list = res1.list;
        this.refreshing = false;
      });
      this.onLoad()
    }
  }
};
</script>

<style lang="scss" scoped>
dl {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  dd {
    margin: 0rem;
    padding: 0.5rem;
    position: relative;
    color: #323233;
    font-size: 0.373rem;
    line-height: 0.64rem;
    background-color: #fff;
    border-bottom: 0.373rem solid rgb(242, 243, 245);
    div {
      height: 1rem;
      line-height: 1rem;
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
      p {
        margin-top: 0rem;
      }
    }
    .ite-bot {
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>